<template>
  <div>
    <el-row class="search-area">
      <el-input
        class="search-input"
        v-model.trim="realTimeKeyword"
        placeholder="请输入搜索内容"
        size="medium"
        @keyup.enter.native="search"
        clearable
      ></el-input>
      <el-button type="primary" size="default" @click="search">搜索</el-button>
    </el-row>
    <div class="serve-list">
      <el-row>
        <el-col :span="7" :offset="0"> 回收站 </el-col>
        <el-col :span="12" :offset="-5" style="float: right">
          <el-select v-model="order" placeholder="时间排序">
            <el-option
              v-for="item in orderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table
        :data="surveysToDisplay"
        height="250"
        border
        style="
          width: 100%;
          height: 700px;
          background-color: rgba(255, 255, 255, 0.5);
        "
      >
        <el-table-column prop="title" label="问卷名" width="300">
        </el-table-column>
        <el-table-column prop="creTime" label="创建时间" width="300">
        </el-table-column>
        <el-table-column prop="ansNum" label="答卷数"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="restoreSurvey(scope.$index, scope.row)"
              type="text"
              size="small"
              icon="el-icon-refresh-left"
              style="font-size: 16px"
              >恢复</el-button
            >
            <el-popconfirm
              title="确定要彻底删除吗"
              @confirm="eraseSurvey(scope.$index, scope.row)"
            >
              <el-button
                type="text"
                size="small"
                icon="el-icon-delete"
                style="font-size: 16px"
                slot="reference"
                >彻底删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List1: [],
      List2: [],
      indexToErase: null,
      rowToErase: null,
      isErasing: false,
      orderOptions: [
        {
          value: "time-sequential",
          label: "时间正序",
        },
        {
          value: "time-reverse",
          label: "时间倒序",
        },
        {
          value: "ansNum-sequential",
          label: "答卷数升序",
        },
        {
          value: "ansNum-reverse",
          label: "答卷数降序",
        },
      ],
      value: "",
      keyword: "",
      realTimeKeyword: "",
      order: "time-reverse",
      surveys: [
        //   {
        //     sid: "444",
        //     title: "cvxc",
        //     ansNum: "4",
        //     creTime: "2000-01-12",
        //     pubTime: "2002-01-01",
        //     deadline: "2023-01-01",
        //     status: "deleted",
        //   },
        // ],
      ],
    };
  },
  methods: {
    search() {
      this.keyword = this.realTimeKeyword;
      // alert(`realTimeKeyword: ${this.realTimeKeyword}\nkeyword: ${this.keyword}`);
    },
    eraseAll() {
      // TODO 清空回收站功能
    },
    eraseSurvey(index, row) {
      console.log(row);
      console.log("above is selected");
      if (row.sid.length === 0) {
        this.$message("网页错误，请刷新页面后再次尝试");
        return;
      }
      let vm = this;
      this.$http
        .delete("/survey/delete?sid=" + row.sid)
        .then((res) => {
          if (res.status === 200) {
            let surveyToErase = this.surveys.filter(function (s) {
              return s.sid === row.sid;
            })[0];
            console.log(surveyToErase.title);
            this.surveys.splice(this.surveys.indexOf(surveyToErase), 1);
            vm.$message("彻底删除成功");
          }
        })
        .catch((err) => {
          console.log(err);
          console.log("内部错误，请刷新页面后再次尝试");
        });
    },
    restoreSurvey(index, row) {
      console.log(row);
      if (row.sid.length === 0) {
        this.$message("网页错误，请刷新页面后再次尝试");
        return;
      }
      console.log("restore");
      let vm = this;
      this.$http
        .put("/survey/status?sid=" + row.sid + "&status=Closed")
        .then((res) => {
          if (res.status === 200) {
            let surveyToRestore = this.surveys.filter(function (s) {
              return s.sid === row.sid;
            })[0];
            console.log(surveyToRestore.title);
            this.surveys.splice(this.surveys.indexOf(surveyToRestore), 1);
            vm.$message("恢复成功");
            // console.log("更新前");
            // vm.$router.go(0);
            // console.log("更新完了");
          }
        })
        .catch((err) => {
          console.log(err);
          // if (err.res.status === 401) {
          //   this.$message("用户未登录");
          // } else if (err.res.status === 500) {
          //   this.$message("服务器错误");
          // } else {
          //   this.$message.error("网络错误，请稍后再试！");
          // }
        });
    },
  },
  computed: {
    surveysToDisplay() {
      var vm = this;
      return this.surveys
        .filter(function (s) {
          //按关键词搜索
          return vm.keyword.length === 0 ? true : s.title.includes(vm.keyword);
        })
        .sort(function (s1, s2) {
          // TODO 时间戳还是时间？
          if (vm.order === "time-sequential") {
            return s1.creTime >= s2.creTime ? 1 : -1;
          } else if (vm.order === "time-reverse") {
            return s1.creTime < s2.creTime ? 1 : -1;
          } else if (vm.order === "ansNum-sequential") {
            return parseInt(s1.ansNum) >= parseInt(s2.ansNum) ? 1 : -1;
          } else if (vm.order === "ansNum-reverse") {
            return parseInt(s1.ansNum) < parseInt(s2.ansNum) ? 1 : -1;
          }
        });
    },
  },
  created() {
    let vm = this;
    this.$http
      .get("survey/my")
      .then((res) => {
        if (res.status === 200) {
          console.log(res.data);
          console.log("上面是直接返回的问卷列表，下面是修改格式后的");
          let tempData = JSON.parse(JSON.stringify(res.data));
          tempData.forEach((s) => {
            let statuses = ["已关闭", "已开启", "未发布", "已删除"];
            s.status = statuses[s.status];
            s.creTime = vm.convertTime(s.creTime);
            s.pubTime = vm.convertTime(s.pubTime);
            s.deadline = vm.convertTime(s.deadline);
          });
          this.surveys = tempData.filter(function (s) {
            return s.status === "已删除";
          });
          console.log(this.surveys);
        }
      })
      .catch((err) => {
        console.log(err);
        this.$message("网络错误");
      });
  },
};
</script>

<style lang="less" scoped>
// 搜索框相关样式
.search-area {
  margin-top: 10px;
  margin-left: -22px;
  text-align: center;
  height: 50px;
}

/deep/ .el-input__inner {
  height: 50px !important;
  font-size: 18px;
}

.search-area .el-button {
  font-size: 18px;
  height: 50px;
  width: 120px;
}

/deep/ .el-tabs__item {
  font-size: 18px !important;
}

/deep/ .el-col-12 {
  width: 24% !important;
}

.el-table {
  height: 700px !important;
  font-size: 18px;
}

/* 问卷列表样式 */
.serve-list {
  width: 98%;
  height: 100%;
  text-align: left;
  font-size: 26px;
  line-height: 60px;
  font-family: "Microsoft YaHei";
  margin-top: 5px;
}

.serve-list .el-row {
  padding-top: 10px;
  padding-bottom: 4px;
}

// /* 问卷卡片样式 */
// .serve-item {
//   width: 85%;
//   background-color: #f0f0f0;
//   padding: 5px;
//   border: 5px solid white;
//   border-radius: 10px;
// }

// /* 问卷分为上下两层的样式 */
// .item-top {
//   padding-left: 20px;
//   height: 50px;
//   overflow: hidden;
// }

// .item-bottom {
//   height: 50px;
//   overflow: hidden;
//   padding-left: 20px;
//   margin-top: -10px;
//   margin-bottom: 10px;
// }

// /* 左上角问卷名字 */
// .item-title {
//   font-size: 26px;
//   font-family: "Microsoft YaHei";
// }

// /* 右上角问卷信息 */
// .item-info {
//   float: right;
//   font-size: 16px;
//   padding-inline: 10px;
// }

// /* 左下角问卷操作 */
// .item-left {
//   float: left;
// }

// .item-left .el-button {
//   font-size: 18px;
//   padding-right: 5px;
// }

// /* 右下角问卷操作按钮 */
// .item-right {
//   float: right;
// }

// .item-margin {
//   margin-right: 10px;
// }

.search-input {
  width: 500px;
  padding-right: 10px;
}

.search-area {
  text-align: center;
  height: 50px;
}

/deep/ .el-input__inner {
  height: 50px !important;
  font-size: 18px;
}

.search-area .el-button {
  font-size: 18px;
  height: 50px;
  width: 120px;
}

.item-right .el-button {
  font-size: 15px;
  width: 140px;
}

.create-delete {
  width: 60%;
  height: 50px;
}
</style>